<template>
    <page>
        <header class="white" flex="dir:top main:center cross:center" style="background-color: #ff4d4d">
            <p class="f24">{{title}}</p>
            <p class="mt12 f14" style="color: #e8e8e8;">
                有效期:&nbsp;{{startDate | dateFormat('YYYY/MM/DD HH:mm')}}&nbsp;至&nbsp;{{endDate | dateFormat('YYYY/MM/DD HH:mm')}}
            </p>
        </header>
        <div class="white-bg of px14 pb14">
            <div class="item-info f16 mt16" v-for="i in list" flex="main:justify">
                <span class="text2">{{i.label}}</span>
                <span>{{i.value}}</span>
            </div>
            <m-button class="outline mx12 mt40" colorClass="c1" @click.native="showGiftCode">转赠他人</m-button>
        </div>
        <p class="tc text3 mt20 mb12">优惠券说明</p>
        <p class="text3 px14 f14 line22">新关注公众号粉丝可得电子加油券更改为新关注公众号 粉丝及只要推荐公众号给他人，且被推荐方关注后， 双方可得电子加油券。</p>
        <!-- 分享二维码弹窗 begin -->
        <lazy-render :time="300" tip>
            <div v-transfer-dom>
                <x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur>
                    <qrcode :value="gefitUrl" type="img" :size="200" class="mt40"></qrcode>
                    <p class="text mt6 mb20 f14">扫描二维码或右上角分享转赠</p>
                    <p class="tc h44 bdt c2 tap" @click="showHideOnBlur = false">关闭窗口</p>
                </x-dialog>
            </div>
        </lazy-render>
        <!-- 分享二维码弹窗 end -->
    </page>
</template>
<script>
  import Vue from 'vue'
  import { Qrcode } from 'vux'
  import qs from 'qs'
  import urljoin from 'url-join'
  import { closePop } from '../../utils/tiny'
  export default {
    name: 'wcl',
    data () {
      const params = this.$route.params
      return {
        ...params,
        showHideOnBlur: false,
        gefitUrl: ''
      }
    },
    computed: {
      list () {
        const {state, freeMoney, minSpend, createDate, type, shopId} = this.$route.params

        const item1 = {
          label: '使用状态',
          value: ['未使用', '已使用', '已过期'][state - 1]
        }
        const item2 = {
          label: '优惠券金额',
          value: Number(freeMoney / 100).toFixed(2) + '元'
        }
        const item3 = {
          label: '最低消费金额',
          value: Number(minSpend / 100).toFixed(2) + '元'
        }
        const item4 = {
          label: '适用油品',
          value: '不限油品'
        }
        const shop = this.$g.shopList.find(x => x.id == shopId)
        const item5 = {
          label: '油站限制',
          value: shop ? shop.shopName : '-'
        }
        const item6 = {
          label: '领取时间',
          value: Vue.filter('dateFormat')(createDate)
        }
        const item7 = {
          label: '获得原因',
          value: ['生日赠送', '加油赠送', '会员赠送', '支付赠送', '关注赠送', '管理员发送'][type - 1]
        }
        return [item1, item2, item3, item4, item5, item6, item7]
      }
    },
    created () {
    },
    methods: {
      // 显示分享二维码
      async showGiftCode () {
        let body = await this.$post_loading('coupon/craetGiftCouponCode', {couponId: this.id})
        this.setGefitUrl(body.obj.giftCode)
        this.showHideOnBlur = true
      },
      // 生成分享地址
      setGefitUrl (giftCode) {
        const params = qs.stringify({
          couponId: this.id,
          giftCode
        })
        let url = ''
        if (baseURL == '/') {
          url = location.origin
        } else {
          url = baseURL
        }
        this.gefitUrl = urljoin(url, `index/giftCouponById?${params}`)
      },
      // 关闭弹窗
      closePop () {
        return closePop(this, 'showHideOnBlur')
      }
    },
    beforeRouteLeave (to, from, next) {
      next(this.closePop())
    },
    components: {Qrcode}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    header {
        height: 120px;
    }

    .item-info {

    }
</style>
